<template>
	<view class="page-index page p-l-30 p-r-30 p-b-150">
		<searchHeader></searchHeader>
		<view class="banner mt-30 mb-40">
			<swiper class="swiper" autoplay indicator-dots indicator-color="#fff" indicator-active-color="#8663E8">
				<swiper-item v-for="item in banners" :key="item.id">
					<view class="swiper-item ">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="nav df wrap">
			<view class="nav-item df-cc column" v-for="item in nav" :key="item.id">
				<image :src="item.icon" mode="" class="mb-10"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		<view class="block-title fsb df-ac">
			<view class="df-ac">
				<view class="fz36 fw-b">推荐直播</view>
				<view class="tag">LIVE</view>
			</view>
			<view>
				<view class="fz24 more" @click="goRouter('/pages/live/live')">MORE</view>
			</view>
		</view>
		<view class="df live-container">
			<zhenxianItem v-for="item in list" :key="item.id" :good="item"></zhenxianItem>
		</view>
		<view class="block-title fsb df-ac">
			<view class="df-ac">
				<view class="fz36 fw-b">限时秒杀</view>
				<view class="tag">HOT</view>
			</view>
			<view>
				<view class="fz24 more"  @click="goRouter('/pages/flashSale/flashSale',{from:'index'})">MORE</view>
			</view>
		</view>
		
		<view class="df live-container">
			<flashSaleCard v-for="item in imgs" :key="item.id" :good="item"></flashSaleCard>
		</view>
		
		<view class="block-title fsb df-ac">
			<view class="df-ac">
				<view class="fz36 fw-b">新品推荐</view>
				<view class="tag">new</view>
			</view>
			<view>
				<view class="fz24 more">MORE</view>
			</view>
		</view>
		<view class="df wrap">
			<goodItem v-for="item in imgs2" :key="item.id" :good="item"></goodItem>
		</view>
		<pageFooter ref="footer"></pageFooter>
	</view>
</template>

<script>
	import searchHeader from '../../components/searchHeader.vue'
	import zhenxianItem from '../../components/zhenxianItem.vue'
	import flashSaleCard from '../../components/flashSaleCard.vue'
	import goodItem from '../../components/goodItem.vue'
	export default {
		components: {
			searchHeader,
			zhenxianItem,
			flashSaleCard,
			goodItem
		},
		data() {
			return {
				query: {
					"keyWord": "", // 模糊搜索，搜索的字段对应keyWordLikeFields
					"type": '', // 全等于筛选，对应fieldEq
					"page": 1, // 第几页
					"size": 10, // 每页返回个数
					"sort": "desc", // 排序方向
					"order": "id" // 排序字段
				},
				nav:[
					{id:1,name:'热销',icon:require('../../static/imgs/i1.png')},
					{id:2,name:'推荐',icon:require('../../static/imgs/i2.png')},
					{id:3,name:'精选',icon:require('../../static/imgs/i3.png')},
					{id:4,name:'新品',icon:require('../../static/imgs/i4.png')},
					{id:5,name:'连衣裙',icon:require('../../static/imgs/i5.png')},
					{id:6,name:'T恤',icon:require('../../static/imgs/i6.png')},
					// {id:7,name:'热销',icon:require('../../static/imgs/i7.png')},
					{id:8,name:'运动裤',icon:require('../../static/imgs/i8.png')},
					{id:9,name:'卫衣',icon:require('../../static/imgs/i9.png')},
				],
				list:[
					{id:1,title:'炸街保障，新品预览',name:'Mona',position:'杭州市',avatar:require('../../static/imgs/user.jpg'),img:'https://z3.ax1x.com/2021/08/08/f1ZNHH.jpg'},
					{id:2,title:'炸街保障，新品预览',name:'Mona',position:'杭州市',avatar:require('../../static/imgs/user.jpg'),img:'https://z3.ax1x.com/2021/08/08/flFJfO.jpg'},
					{id:3,title:'炸街保障，新品预览',name:'Mona',position:'杭州市',avatar:require('../../static/imgs/user.jpg'),img:'https://z3.ax1x.com/2021/08/08/flF8k6.jpg'},
					{id:4,title:'炸街保障，新品预览',name:'Mona',position:'杭州市',avatar:require('../../static/imgs/user.jpg'),img:'https://z3.ax1x.com/2021/08/08/flFGtK.jpg'},
				],
				imgs:[
					{id:1,img:'https://z3.ax1x.com/2021/08/08/flF1Tx.jpg'},
					{id:2,img:'https://z3.ax1x.com/2021/08/08/f1ZdUA.jpg'},
					{id:3,img:'https://z3.ax1x.com/2021/08/08/f1ZaEd.jpg'},
					{id:4,img:'https://z3.ax1x.com/2021/08/08/f1Zw4I.jpg'},
					{id:5,img:'https://z3.ax1x.com/2021/08/08/flFwnA.jpg'},
				],
				imgs2:[
					{id:1,img:'https://z3.ax1x.com/2021/08/08/flmLin.jpg'},
					{id:2,img:'https://z3.ax1x.com/2021/08/08/flmzsU.jpg'},
					{id:3,img:'https://z3.ax1x.com/2021/08/08/flmjzV.jpg'},
					{id:4,img:'https://z3.ax1x.com/2021/08/08/flmXR0.jpg'},
					{id:5,img:'https://z3.ax1x.com/2021/08/08/flmxMT.jpg'},
					{id:6,img:'https://z3.ax1x.com/2021/08/08/flnSLF.jpg'},
					{id:7,img:'https://z3.ax1x.com/2021/08/08/fln9Z4.jpg'},
				],
				banners:[
					{id:1,img:'https://z3.ax1x.com/2021/08/08/fluVts.jpg'},
					{id:2,img:'https://z3.ax1x.com/2021/08/08/fluEkj.jpg'},
					{id:3,img:'https://z3.ax1x.com/2021/08/08/fluk7Q.jpg'},
					{id:4,img:'https://z3.ax1x.com/2021/08/08/fluF0g.jpg'},
				],
				
				page:1
				
				
				
			}
		},
		onShow() {
			if(this.$refs.footer) {
				this.$refs.footer.cur =1
			}
		},
		created() {
		
			this.init()
		},
		onReachBottom() {
			console.log('bottom')
		},
		methods: {
			async init() {
				// let res = await this.$api.jobInfoPage(this.query)
			},
			
		}
	}
</script>

<style lang="scss">
	.page-index {
		.swiper {
			height: 690rpx;
			
			.swiper-item {
				height: 690rpx;
				border-radius: 30rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 690rpx;
				}
			}
		}
		.nav {
			.nav-item {
				text-align: center;
				font-size: 22rpx;
				flex: 0 0 25%;
				margin-bottom: 30rpx;
				image {
					width: 76rpx;
					height: 76rpx;
				}
			}
		}
		.block-title {
			color: #282A32;
			margin-bottom: 40rpx;
			.tag {
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				background-color: #8663E8;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
				margin-left: 15rpx;
			}
			.more {
				padding-right: 30rpx;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 0;
					height: 0;
					border-left: 14rpx solid #282A32;
					border-top: 10rpx solid transparent;
					border-bottom: 10rpx solid transparent;
				}
			}
		}
		.live-container {
			overflow-y: scroll;
			padding-bottom: 60rpx;
		}
	}
</style>
